<template>
	<!-- 自定义头部 -->
	<custom-navbar title="投票信息" bgColor="#fff" textColor="#333">
	</custom-navbar>
	<view class="d-container">
		<view class="container" style="padding-top: 0;">
			<view class="vote-base-cls module-common-cls">
				<view class="line-cls">
					<view class="base-title-cls ellipsis">{{voteDetailObj?.voteTitle}}</view>
				</view>
				<view class="eg-cls">
					<view>1.本次投票为单选投票，实名投票</view>
					<view>2.本次投票截止于{{voteDetailObj.endTime}}</view>
				</view>
			</view>

			<radio-group @change="radioChange" v-model="paramsObj.optionId">
				<view v-for="(item,index) in optionList" :key="item.optionId" class="items-cls module-common-cls">
					<view class="item-title-cls ellipsis">{{item.optionContent}}</view>
					<view class="item-radio-cls">
						<radio :value="item.optionId" :checked="paramsObj.optionId==item.optionId" />
					</view>
				</view>
			</radio-group>
		</view>
		<view class="toolbar-cls" v-if="paramsObj.type==1">
			<button size="default" type="primary" @click="submitHandler" :disabled="voteDetailObj.status==2">
				{{voteDetailObj.status==2?"已结束":"投票"}}
			</button>
		</view>
		<view class="toolbar-cls" v-if="paramsObj.type==2">
			<button size="default" type="primary" @click="submitEditHandler" :disabled="voteDetailObj.status==2">
				{{voteDetailObj.status==2?"已结束":"重新投票"}}
			</button>
		</view>
	</view>
</template>

<script setup>
	import CustomNavbar from '@/components/CustomNavbar.vue';
	import {
		ref
	} from 'vue'
	import {
		findById,
		listVoteOptoin,
		addVoteRecord,
		editVoteRecord
	} from '@/api/vote.js'
	import {
		BASE_URL
	} from '@/config/index.js'
	import {
		useRouter,
		toast,
		getStorageSync,
		compareDateTime
	} from '@/utils/index.js'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";

	const voteDetailObj = ref({})
	const paramsObj = ref({})
	const currentUser = getStorageSync('currentUser')
	const optionIdObj = ref('')
	const optionIdOldObj=ref('')
	const voteIdObj=ref('')
	const optionList = ref([])
	const imageStyles = ref({
		width: 100,
		height: 100
	})
	const coverStyles = ref({
		width: '100%',
		height: 150
	})
	const itemStyles = ref({
		width: 200,
		height: 120
	})
	const sourceType = ref(['album', 'camera'])
	onLoad(params => {
		paramsObj.value = JSON.parse(decodeURIComponent(params.item))
		paramsObj.value.optionId = paramsObj.value.optionId + ''
		console.log(paramsObj.value.type)
		if (paramsObj.value.type == 2) {
			optionIdObj.value = paramsObj.value.optionId
			optionIdOldObj.value=paramsObj.value.optionId;
		}
		voteIdObj.value=paramsObj.value.voteId
		initInfo(paramsObj.value)
	})
	const initInfo = async (data) => {
		const result = await findById(data.voteId)
		voteDetailObj.value = result.data
		const res = await listVoteOptoin({
			voteId: data.voteId
		})
		var m = res.rows.map(t => {
			t.optionId = t.optionId + ''
			return t
		})
		optionList.value = res.rows;
	}

	const radioChange = (e) => {
		optionIdObj.value = e.detail.value;
	}
	const submitHandler = async () => {
		if (!optionIdObj.value) {
			toast('请选项投票项')
		} else {
			const result = await addVoteRecord({
				optionId: optionIdObj.value,
				voteId:voteIdObj.value,
				
			})
			toast('投票成功')
			// useRouter("/pages/joinVoteList/joinVoteList", {}, "redirectTo")
			useRouter("/pages/voteResult/voteResult", {voteId:voteIdObj.value}, "redirectTo")

		}
	}
	const submitEditHandler = async () => {
		if (!optionIdObj.value) {
			toast('请选项投票项')
		} else {
			const result = await editVoteRecord({
				optionId: optionIdObj.value,
				recordId: paramsObj.value.recordId,
				oldOptionId:optionIdOldObj.value
			})
			toast('投票成功')
			// useRouter("/pages/joinVoteList/joinVoteList", {}, "redirectTo")
			useRouter("/pages/voteResult/voteResult", {voteId:voteIdObj.value}, "redirectTo")

		}
	}
</script>

<style lang="less">
	.d-container {
		padding-top: 50px;
		padding-bottom: 120rpx;
	}

	.user-cls {
		display: flex;
		align-items: center;

		image {
			width: 60px;
			height: 60px;
			border-radius: 10px;
		}

		.user-base-cls {
			margin-left: 20rpx;

			.user-base-cls-1 {
				font-size: 20x;
				font-weight: bolder;
			}

			.user-base-cls-2 {
				margin-top: 14rpx;
				font-size: 14px;
			}
		}
	}

	.module-common-cls {
		background-color: #fff;
		border-radius: 5px;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.vote-base-cls {
		image {
			height: 300rpx;
			border-radius: 10px;
		}

		.line-cls {
			padding-bottom: 20px;

			.base-title-cls {
				margin-top: 5px;
				font-size: 20px;
				font-weight: bolder;
			}

			.base-desc-cls {
				margin-top: 5px;
			}

			border-bottom: 1px solid #75aeed;
		}

		.eg-cls {
			margin-top: 30rpx;

			view {
				margin-top: 10rpx;
				font-size: 14px;
			}
		}
	}

	.nav-cls {
		display: flex;
		justify-content: space-between;
		color: #75aeed;
		font-size: 14px;

		view {
			padding: 2px 0;
		}
	}

	.items-cls {
		margin: 20rpx 0;
		position: relative;

		image {
			width: 70%;
			height: 300rpx;
			border-radius: 10px;
		}

		.item-title-cls {
			margin-bottom: 20rpx;
		}

		.item-tag-cls {
			margin-top: 20rpx;
		}

		.item-radio-cls {
			position: absolute;
			top: 30rpx;
			right: 10rpx;
		}
	}


	.toolbar-cls {
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}
</style>